import React from 'react';
import PropTypes from 'prop-types';
import { Popover, message, Spin } from 'antd';
import _ from 'lodash';
import { getKnowledgeDetail } from '@api/asset';
import './index.less';

class FingerItem extends React.Component {
  static propTypes = {
    name: PropTypes.string,
    fullName: PropTypes.string,
    rawType: PropTypes.string,
    isDomestic: PropTypes.bool
  };
  static rawTypeDesc = {
    language: '开发语言',
    product: '系统组件',
    db: '数据库',
    server: 'Web容器',
    webapp: 'Web应用',
    framework: 'Web框架',
    frontend: 'Web框架',
    os: '操作系统'
  };

  constructor(props) {
    super(props);
    this.state = {
      loading: true,
      detail: {}
    };
    this.loaded = false;
  }

  onVisibleChange = visible => {
    const { name } = this.props;
    if (visible && !this.loaded) {
      this.loaded = true;
      this.setState({ loading: true });
      getKnowledgeDetail(name)
        .then(res => {
          const detail = _.get(res, 'data.data.knowledge') || {};
          this.setState({ detail });
        })
        .catch(() => {
          message.error('获取知识库详情失败');
        })
        .finally(() => {
          this.setState({ loading: false });
        });
    }
  };

  renderPopoverContent = () => {
    const { rawType, isDomestic, name } = this.props;
    const { detail, loading } = this.state;

    if (loading) {
      return <Spin spinning tip="加载中" className="c-finger-item-content is-loading" />;
    }

    const {
      referenceLinks = [],
      description = '',
      company = {},
      brand = {},
      component = {},
      category
    } = detail;
    const parent = _.get(category, 'parent.name', '');

    const referenceLink = _.get(referenceLinks, '0', '');
    const domesticeName = isDomestic ? `${name}(国产化)` : name;

    const data = [
      {
        label: FingerItem.rawTypeDesc[_.camelCase(rawType)] || '-',
        value: referenceLink ? (
          <a target="_blank" rel="noopener noreferrer" href={referenceLink}>
            {domesticeName}
          </a>
        ) : (
          domesticeName
        )
      }
    ];
    if (description) {
      data.push({
        label: '描述',
        value: description
      });
    }
    if (company.name) {
      const companyReferenceLink = _.get(company.referenceLinks, '0', '');
      const name = company.name.cn || company.name.en;
      if (name) {
        data.push({
          label: '厂商',
          value: companyReferenceLink ? (
            <a target="_blank" rel="noopener noreferrer" href={companyReferenceLink}>
              {name}
            </a>
          ) : (
            name
          )
        });
      }
    }
    if (brand.name) {
      const name = brand.name.cn || brand.name.en;
      if (name) {
        data.push({ label: '品牌', value: name });
      }
    }
    if (component.type) {
      const name = _.get(component.type, 'name', {});
      data.unshift({
        label: '分类',
        value: [parent, name.cn || name.en].filter(Boolean).join('/')
      });
    }

    return (
      <div className="c-finger-item-content">
        {data.map((item, index) => (
          <div className="item" key={index}>
            <label>{item.label}：</label>
            <div className="value">{item.value}</div>
          </div>
        ))}
      </div>
    );
  };

  render() {
    const { name, fullName = '', isDomestic = false } = this.props;
    const fullNameStr = _.trim(fullName) || '';
    const domesticeName = fullNameStr && isDomestic ? `${fullNameStr}(国产化)` : fullNameStr;
    return name ? (
      <Popover
        onVisibleChange={this.onVisibleChange}
        title={null}
        content={this.renderPopoverContent()}
        style={{ zIndex: 10 }}
      >
        <span className="c-finger-item">{domesticeName}</span>
      </Popover>
    ) : (
      <span className="c-finger-item empty-item">-</span>
    );
  }
}

export default FingerItem;
